<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
    <title>Help</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        h3 {
            padding: 10px 4px;
        }
        html, body {
            height: 100%;
        }
        .video-wrapper {
            position: relative;
            height:50%;
        }
        .video-mask {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .tip {
            display: none;
            padding: 8px;
            border-radius: 8px;
            flex-direction: column;
            align-items: center;
            background: rgba(0,0,0,.5);
        }

        .tip span {
            color: #FFFFFF;
        }

        .tip a {
            padding: 0 10px;
            margin-top: 8px;
            border: 1px solid rgba(255,255,255,.8);
            border-radius: 4px;
            text-decoration: none;
            color: rgba(255,255,255,.8);
        }
    </style>
</head>
<body>
<h3>安卓手机使用介绍</h3>
<div class="video-wrapper">
<video id="video" src="http://owtl83r0c.bkt.clouddn.com/S71110-12560502.mp4" controls="controls" muted="muted" width="100%;" height="100%;"></video>
<div class="video-mask">
    <div class="tip">
        <span>此视频将消耗您6MB流量</span>
        <a href="#">继续播放</a>
    </div>
</div>
</div>
<h3>苹果手机使用介绍</h3>

<p style="padding: 0 8px;">
和安卓类似，只不过复制长链接后要手动到淘宝的搜索栏进行粘贴，点击搜索即可
</p>
<script>
    var videoMask = document.querySelector('.video-mask')
    var tip = document.querySelector('.tip')
    var play = document.querySelector('.tip a')
    var video = document.querySelector('#video')
    videoMask.addEventListener('click', function () {
        tip.style.display = 'flex'
    })
    play.addEventListener('click', function (e) {
        e.preventDefault()
        video.play()
        videoMask.style.display = 'none'
    })
</script>
</body>

</html>